<template>
  <div class="min-h-screen bg-white dark:bg-gray-900">
    <div class="container mx-auto py-20 px-4 sm:px-6 lg:px-8">
      <!-- 项目展示标题 -->
      <div class="max-w-3xl mx-auto text-center mb-16" v-animate="{ type: 'fade', duration: 1000 }">
        <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">项目案例</h1>
        <TypeWriter
          :text="['精品案例展示', '创新技术应用', '行业解决方案']"
          :delay="2000"
          class="text-xl text-blue-600 dark:text-blue-400 mb-4"
        />
        <p class="text-xl text-gray-700 dark:text-gray-300">展示我们的优秀项目案例</p>
      </div>

      <!-- 分类过滤器 -->
      <div class="flex flex-wrap justify-center gap-4 mb-12">
        <button
          v-for="category in categories"
          :key="category"
          @click="selectedCategory = category"
          class="px-6 py-2 rounded-full text-sm font-medium transition-colors duration-200"
          :class="[
            selectedCategory === category
              ? 'bg-blue-600 text-white'
              : 'bg-blue-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900/30'
          ]"
        >
          {{ category }}
        </button>
      </div>

      <!-- 项目网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div
          v-for="project in filteredProjects"
          :key="project.id"
          class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 border border-gray-100 dark:border-gray-700"
          v-animate="{ type: 'fade', duration: 800 }"
        >
          <div class="relative">
            <img :src="project.image" :alt="project.title" class="w-full h-48 object-cover">
            <div class="absolute top-0 right-0 m-4">
              <span class="px-3 py-1 bg-blue-600 text-white text-sm rounded-full">
                {{ project.category }}
              </span>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">
              {{ project.title }}
            </h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">
              {{ project.description }}
            </p>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600 dark:text-gray-400">
                {{ project.date }}
              </span>
              <button @click="showProjectDetails(project)" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium">
                了解更多
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { usePageData } from '@/composables'
import { inject } from 'vue'
import TypeWriter from '@/components/TypeWriter.vue'

const { projects } = usePageData()
const projectsList = computed(() => projects?.featured || [])
const dialog = inject('dialog')

// 添加日期和ID属性
const projectsWithDetails = computed(() => {
  return projectsList.value.map((project, index) => ({
    ...project,
    id: index + 1,
    date: '2024-01' // 为每个项目添加一个默认日期
  }))
})

const categories = ['全部', '金融', '电商', '教育', '医疗', '城市', '工业']
const selectedCategory = ref('全部')

// 根据选择的分类过滤项目
const filteredProjects = computed(() => {
  if (selectedCategory.value === '全部') {
    return projectsWithDetails.value
  }
  return projectsWithDetails.value.filter(project => project.category === selectedCategory.value)
})

const showProjectDetails = async (project) => {
  try {
    await dialog.open('demo', {
      title: project.title,
      message: `${project.description}\n\n该项目详情页面正在建设中，敬请期待！`,
      showCancel: false,
      confirmText: '我知道了'
    })
    console.log('用户查看了项目:', project.title)
  } catch (err) {
    console.error('弹窗显示失败:', err)
  }
}
</script>
